<template>
<div id="building">
  <el-col :span="8">
    <br>
  </el-col>
  <el-col :span="8">
    <el-card shadow="always" class="box-card">
      <el-row>
        <el-col :span="6"><br></el-col>
        <el-col :span="12"><img src="https://java103-shijz.oss-cn-chengdu.aliyuncs.com/logo.png" class="image"></el-col>
        <el-col :span="6"><br></el-col>
      </el-row> 
      <el-row><br></el-row>
      <el-row>
        <el-col :span="24">
          <div class="text">
            <span>菜购生鲜</span>
          </div>
        </el-col>
      </el-row>
      <el-row><br><br><br></el-row>
      <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="20">
          <el-row>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" hide-required-asterisk="true">
              <el-form-item prop="account" label="账号">
                <el-input v-model="form.account" placeholder="请输入账号" ></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码" ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login('form')" style="width:30%;margin-bottom:15px;">登录</el-button>
                <el-button type="info"  @click="$router.push('/register')" style="width:30%;margin-bottom:15px;">注册</el-button>
              </el-form-item>
            </el-form>
          </el-row> 
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
      
    </el-card>
  </el-col>
  <el-col :span="8">
    <br>
  </el-col>
</div>
</template>
<script>

export default {
  data(){
    return{
      form:{
        account:"zhangsan",
        password:"123456"
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    login(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/user/login",this.form).then(res => {
            if (res.data.code == 500) {
              this.$message.error(res.data.message)
              return
            }
            let role = res.data.data.authorities[0].authority
            console.log(role);
            if (role == 'ROLE_customer') {
              this.$router.push({path: '/'})
            } else {
              this.$router.push({path: '/main'})
            }
            
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style scoped>
.box-card {
  width: 30rem;
  height: 35rem;
  margin-top: 3rem;
}
.image {
  width: 100%;
  display: block;
}
.text {
  font-size: 30px;
}
#building{
  background:url("https://java103-shijz.oss-cn-chengdu.aliyuncs.com/background.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
.el-card {
  background-color: rgba(255, 255, 255, 0.7); /* 这里0.8代表80%的透明度，你可以根据需求调整 */
}
</style>